<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="发布日期" prop="releaseTime">
        <el-date-picker clearable
                        v-model="queryParams.releaseTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择发布日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="舆情属地" prop="releaseArea">
        <el-select v-model="queryParams.releaseArea" placeholder="请选择舆情属地" clearable>
          <el-option
            v-for="dict in dict.type.ps_possession"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关键字" prop="keywords">
        <el-input
          v-model="queryParams.keywords"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          v-hasRole="['admin','conservator']"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['publicsentiment:publicsentiment:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          v-hasRole="['admin','conservator']"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['publicsentiment:publicsentiment:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          v-hasRole="['admin','conservator']"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['publicsentiment:publicsentiment:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['publicsentiment:publicsentiment:export']"
        >导出
        </el-button>
      </el-col>
      <el-button
        type="info"
        v-hasRole="['admin','conservator']"
        icon="el-icon-upload2"
        size="mini"
        @click="handleImport"
      >导入</el-button>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 用户导入对话框 -->
    <el-dialog :close-on-click-modal='false' :title="upload.title" :visible.sync="upload.open" width="400px">
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!--        <div class="el-upload__tip" slot="tip">-->
        <!--          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据-->
        <!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
        <!--        </div>-->
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <div class="main_container"  v-loading="loading">
      <div class="flex-1">
        <span class="ops-item" :class="{'hover':navTabsAc=='all'}" @click="navTabsAc='all';queryParams.pageNum = 1;getList()">全部<!----></span>
        <span class="ops-item" :class="{'hover':navTabsAc=='pic'}" @click="navTabsAc='pic';queryParams.pageNum = 1;getList()">图片识别<!----></span>
      </div>
      <div class="cont_all" v-if="navTabsAc == 'all'">
        <!-- 全部列表 -->
        <div class="cont_item" v-for="(item,index) in publicsentimentList" :key="index + Date.now()">
          <div class="arrange_top">
            <el-checkbox v-model="item.isChecked"  @change="changeItem(item,index)"></el-checkbox>
            <span class="i_index">
              	{{ (queryParams.pageNum - 1)* queryParams.pageSize + index+1 }}
            </span>
            <!-- 正负面浮窗 -->
            <!-- <el-popover
              placement="bottom-start"
              width="40"
              trigger="hover"
              :offset="-10">
              <div class="popover_cont">
                  <div v-for="(item,index) in tendencyArr" :key="index">{{item}}</div>
              </div> -->
            <img :src="item.tendentiousness==1?IM1:item.tendentiousness == 2?IM2:IM3" slot="reference">
            <!-- </el-popover> -->
            <div style="width:40px;font-size: 14px;font-weight: 400;color: #999;" v-if="item.readStatus == 1 && item.psStatus !=5">已读</div>
            <div style="width:55px;font-size: 14px;font-weight: 400;color: #999;" v-if="item.psStatus ==5">已处置</div>
            <el-tooltip v-if="item.pstitle.length>80" class="item" effect="dark" :content="item.pstitle" placement="top-start">
              <div @click="gotoLink(item)" style="cursor: pointer;" class="title">{{item.pstitle}}</div>
            </el-tooltip>

            <div v-else @click="gotoLink(item)" style="cursor: pointer;" class="title">{{item.pstitle}}</div>
          </div>
          <div style="margin-top: 5px;" v-if="item.imgArr.length > 1">
            <el-image
              v-for="(i,index) in item.imgArr" :key="index + index"
              style="width: 128px; height: 72px;margin-left: 10px;"
              fit="cover"
              :preview-src-list="[i]"
              :src="i">
            </el-image>
          </div>
          <div class="arrange_cont" :style="{'margin-top':item.imgArr.length > 1?'0px':'10px'}">
            <el-image
              v-if="item.imgArr.length == 1"
              style="width: 128px; height: 72px"
              fit="cover"
              :preview-src-list="[item.imgArr[0]]"
              :src="item.imgArr[0]">
            </el-image>
            <div class="right_cont" :style="{'width':item.imgArr.length == 1?'92%':'100%'}">
              <div class="sub_title" v-html="item.pscontent"></div>
              <div class="bottom_cont">
                <div class="b_left">
                  <span>{{item.releaseTime}}</span>
                  <span>{{item.srcWebset}}</span>
                  <!-- <span>来源平台</span> -->
                  <span v-if="item.releaseArea">{{ '发布于' + getReleaseArea(item.releaseArea)}}</span>
                  <!-- <span>来源地址</span> -->
                </div>
                <div class="b_right">
                  <el-button type="text"  @click="handDetails(item)">详情</el-button>
                  <el-button
                    type="text"
                    v-if="item.psStatus < 3"
                    v-hasRole="['admin','conservator']"
                    @click="handAssign(item)"
                  >分派</el-button>
                  <el-button
                    v-if="item.psStatus >= 3"
                    type="text"
                    v-hasRole="['admin','conservator']"
                    @click="handAssign(item)"
                  >重新分派</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-empty style="margin-top:12%;" v-if="!publicsentimentList.length" :image-size="120"></el-empty>
      </div>

      <div class="cont_all" v-else>
        <!-- 图文列表 -->
        <div class="cont_item" v-for="(item,index) in imgTxtList" :key="index + Date.now()">
          <div class="arrange_top">
            <el-checkbox v-model="item.isChecked"  @change="changeItem(item,index)"></el-checkbox>
            <span class="i_index">
              	{{ (queryParams.pageNum - 1)* queryParams.pageSize + index+1 }}
            </span>
            <!-- 正负面浮窗 -->
            <img :src="item.tendentiousness==1?IM1:item.tendentiousness == 2?IM2:IM3" slot="reference">
            <div style="width:40px;font-size: 14px;font-weight: 400;color: #999;" v-if="item.readStatus == 1 && item.psStatus !=5">已读</div>
            <div style="width:40px;font-size: 14px;font-weight: 400;color: #999;" v-if="item.psStatus ==5">已处置</div>

            <el-tooltip v-if="item.pstitle.length>80" class="item" effect="dark" :content="item.pstitle" placement="top-start">
              <div @click="gotoLink(item)" style="cursor: pointer;" class="title">{{item.pstitle}}</div>
            </el-tooltip>

            <div v-else @click="gotoLink(item)" style="cursor: pointer;" class="title">{{item.pstitle}}</div>
          </div>
          <div style="margin-top: 5px;" v-if="item.imgArr.length > 1">
            <el-image
              v-for="(i,index) in item.imgArr" :key="index + index"
              style="width: 128px; height: 72px;margin-left: 10px;"
              fit="cover"
              :preview-src-list="[i]"
              :src="i">
            </el-image>
          </div>
          <div class="arrange_cont" :style="{'margin-top':item.imgArr.length > 1?'0px':'10px'}">
            <el-image
              v-if="item.imgArr.length == 1"
              style="width: 128px; height: 72px"
              fit="cover"
              :preview-src-list="[item.imgArr[0]]"
              :src="item.imgArr[0]">
            </el-image>
            <div class="right_cont" :style="{'width':item.imgArr.length == 1?'92%':'100%'}">
              <div class="sub_title" v-html="item.pscontent"></div>
              <div class="bottom_cont">
                <div class="b_left">
                  <span>{{item.releaseTime}}</span>
                  <span>{{item.srcWebset}}</span>
                  <!-- <span>来源平台</span> -->
                  <span v-if="item.releaseArea">{{ '发布于' + getReleaseArea(item.releaseArea)}}</span>
                  <!-- <span>来源地址</span> -->
                </div>
                <div class="b_right">
                  <el-button type="text" @click="handDetails(item)">详情</el-button>
                  <el-button
                    type="text"
                    v-if="item.psStatus < 3"
                    v-hasRole="['admin','conservator']"
                    @click="handAssign(item)"
                  >分派</el-button>
                  <el-button
                    v-if="item.psStatus >= 3"
                    type="text"
                    v-hasRole="['admin','conservator']"
                    @click="handAssign(item)"
                  >重新分派</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <el-empty style="margin-top:12%;" v-if="!imgTxtList.length" :image-size="120"></el-empty>
      </div>

    </div>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改舆情处置对话框 -->
    <el-dialog :title="title" :close-on-click-modal='false' :visible.sync="open" width="60%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" :disabled="isDisabled">
        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="16">
            <el-form-item label="标题" prop="pstitle">
              <el-input v-model="form.pstitle" placeholder="请输入标题"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="倾向性" prop="tendentiousness">
              <el-select style="width: 100%;" v-model="form.tendentiousness" placeholder="请选择倾向性">
                <el-option
                  v-for="dict in dict.type.ps_tendentiousness"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="16">
            <el-form-item label="链接" prop="linkUrl">
              <el-input v-model="form.linkUrl" placeholder="请输入链接"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="媒体类型" prop="mediaType">
              <el-select style="width: 100%;" v-model="form.mediaType" placeholder="请选择媒体类型">
                <el-option
                  v-for="dict in dict.type.ps_media"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="来源网站" prop="srcWebset">
              <el-input v-model="form.srcWebset" placeholder="请输入来源网站"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item  label="发布日期" prop="releaseTime">
              <el-date-picker clearable
                              v-model="form.releaseTime"
                              type="date"
                              style="width: 100%;"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择发布日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="舆情属地" prop="releaseArea">
              <el-select style="width: 100%;" v-model="form.releaseArea" placeholder="请选择舆情属地">
                <el-option
                  v-for="dict in dict.type.ps_possession"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="舆情分类" prop="pscategory">
              <el-select style="width: 100%;" v-model="form.pscategory" placeholder="请选择舆情分类">
                <el-option
                  v-for="dict in dict.type.ps_category"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="涉及问题" prop="issuesInvolved">
              <el-select style="width: 100%;" @change="getStrategyList" v-model="form.issuesInvolved" placeholder="请选择涉及问题">
                <el-option
                  v-for="dict in dict.type.ps_industry"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="应对策略" prop="strategies">
              <el-select style="width: 100%;" v-model="form.strategies" placeholder="请选择应对策略">
                <el-option
                  v-for="item in strategyList"
                  :key="item.id"
                  :label="item.strategy_name"
                  :value="parseInt(item.id)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="关键字" prop="keywords">
              <el-input v-model="form.keywords" placeholder="请输入关键字"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="作者" prop="newsAuthor">
              <el-input v-model="form.newsAuthor" placeholder="请输入作者"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="舆情等级" prop="pslevel">
              <el-select style="width: 100%;" v-model="form.pslevel" placeholder="请选择舆情等级">
                <el-option
                  v-for="dict in dict.type.ps_grade"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="信源范围" prop="sourceRange">
              <el-select style="width: 100%;" v-model="form.sourceRange" placeholder="请选择信源范围">
                <el-option
                  v-for="dict in dict.type.ps_message"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="处理时限" prop="dealPeriod">
              <el-select style="width: 100%;" v-model="form.dealPeriod" placeholder="请选择舆情等级">
                <el-option
                  v-for="dict in dict.type.ps_deadline"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-form-item prop="pscontent" label="舆情内容">
          <editor ref="editorSon"  v-model="form.pscontent" :height="200"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!isDisabled" type="primary" @click="submitForm">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 分派弹窗 -->
    <el-dialog  style="position: absolute;top:20%;left: -10%;" :close-on-click-modal='false' title="舆情分派" :visible.sync="visibleAssign" width="500px">

      <div class="asin_box">
        <span>选择分派单位：</span>
        <div class="r_select">
          <el-cascader
            style="width: 100%;"
            v-model="deepId"
            placeholder="请选择"
            class="row_a"
            :options="deptList"
            ref='ownArea'

            :props="{multiple: true, checkStrictly: true ,label:'deptName',value:'deptId'}"
            :show-all-levels="false"
            clearable>
          </el-cascader>
          <!-- @change="selectArea" -->
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="submitAssign">分 派</el-button>
        <el-button @click="visibleAssign=false;">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import {
  listPublicsentiment,
  getPublicsentiment,
  delPublicsentiment,
  addPublicsentiment,
  updatePublicsentiment,
  getStrategyList,
  readNews
} from "@/api/publicsentiment/publicsentiment";

import { listDept } from "@/api/system/dept";

import { getToken } from "@/utils/auth";

// 导入模板接口importTemplate
import { importTemplate, apportionPublicsentiment } from "@/api/publicsentiment/publicsentiment";

import IM1 from "@/assets/imgs/1.jpg";
import IM2 from "@/assets/imgs/2.jpg";
import IM3 from "@/assets/imgs/3.jpg";
export default {
  name: "Publicsentiment",
  dicts: ['ps_possession','ps_deadline','ps_message', 'ps_category', 'ps_grade', 'ps_industry', 'ps_tendentiousness', 'ps_media'],
  data() {
    return {
      userInfo:JSON.parse(localStorage.getItem('userinfo')),
      //因对策略数据
      strategyList:[],
      //当前舆情id
      ItemId:'',
      deepId:[],
      //单位列表
      deptList:[],
      //分派弹窗
      visibleAssign:false,
      //是否禁用
      isDisabled:false,
      tendencyArr:['正面','中性','负面'],
      //倾向性浮窗
      visibleTendency:false,
      // 正负面图片
      IM1,IM2,IM3,
      //全部or图文
      navTabsAc: "all",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 舆情处置表格数据
      publicsentimentList: [],
      //图文列表数据
      imgTxtList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        releaseTime: null,
        releaseArea: null,
        keywords: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      // 表单校验
      rules: {
        pstitle: [
          {required: true, message: "上报舆情标题不能为空", trigger: "blur"}
        ],
        tendentiousness: [
          {required: true, message: "倾向性不能为空", trigger: "blur"}
        ],
        mediaType: [
          {required: true, message: "媒体类型不能为空", trigger: "blur"}
        ],
        srcWebset: [
          {required: true, message: "来源网站不能为空", trigger: "blur"}
        ],
        releaseTime: [
          {required: true, message: "发布日期不能为空", trigger: "blur"}
        ],
        releaseArea: [
          {required: true, message: "舆情属地不能为空", trigger: "blur"}
        ],
        pscategory: [
          {required: true, message: "舆情分类不能为空", trigger: "blur"}
        ],
        issuesInvolved: [
          {required: true, message: "涉及问题不能为空", trigger: "blur"}
        ],
        sourceRange: [
          {required: true, message: "信源范围不能为空", trigger: "blur"}
        ],
        pscontent: [
          { required: true, message: '舆情内容不能为空', trigger: 'blur' },
        ],
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/publicsentiment/publicsentiment/toLead",
        //舆情上报数据
        appearFrom:{},
      },
    };
  },
  watch:{
    $route: {
      handler:  function (nval, oval){
        if(nval.query.form && oval.name == 'Report' ){
          this.form = {}
          this.appearFrom = JSON.parse(this.$route.query.form)
          this.form = this.appearFrom
          this.form['pscontent'] = this.appearFrom['reportContent']
          this.$router.push({ query: {} })
          this.open = true
        }
        if(nval.query.form && oval.name == 'Participation' ){
          this.form = {}
          this.appearFrom = JSON.parse(this.$route.query.form)
          this.form['pstitle'] = this.appearFrom['title']
          this.form['releaseArea'] = this.appearFrom['area']
          this.form['pscontent'] = this.appearFrom['content']
          this.form['newsAuthor'] = this.appearFrom['publicName']
          this.$router.push({ query: {} })
          this.open = true
        }
      },
      deep:true
    }
  },
  created() {
    this.getList();
    this.getUnitList()
    //调用编辑弹窗
    if(this.$route.query.form){
      this.form = {}
      this.appearFrom = JSON.parse(this.$route.query.form)
      //判断来源
      if(this.appearFrom.pstitle){
        this.form = this.appearFrom
        this.form['pscontent'] = this.appearFrom['reportContent']
      }else{
        this.form['pstitle'] = this.appearFrom['title']
        this.form['releaseArea'] = this.appearFrom['area']
        this.form['pscontent'] = this.appearFrom['content']
        this.form['newsAuthor'] = this.appearFrom['publicName']
      }
      this.$router.push({ query: {} })
      this.$nextTick(()=>{
        this.open = true
      })
    }
  },

  methods: {
    getReleaseArea(value){
      let label = null
      this.dict.type.ps_possession.map(item=>{
        if(item.value == value){
          label =  item.label
        }
      })
      return label
    },
    // 分派
    submitAssign(){
      if(!this.deepId.length){
        this.$message.warning('请选择分派单位')
      }else{
        let deepIds = []
        this.deepId.map(item=>{
          deepIds.push(item[item.length-1])
        })
        var data = {}
        data.ids = deepIds
        data.itemId = this.ItemId
        apportionPublicsentiment(data).then(res =>{
          this.$modal.msgSuccess("分派成功");
          this.visibleAssign = false;
          this.getList();

        })
      }
    },
    //打开分派弹窗
    handAssign(item){
      this.deepId=[]
      this.ItemId = item.id
      this.visibleAssign = true
    },
    //获取单位列表
    getUnitList(){
      listDept().then(response => {
        let data  =  this.handleTree(response.data, "deptId")[0].children;
        data.map(item=>{
          item.disabled = true
        })
        this.deptList = data
      });
    },
    //处理选中数据
    changeItem(item,index) {
      this.publicsentimentList[index].isChecked = !item.isChecked
      this.$set(this.publicsentimentList[index],'isChecked',!item.isChecked);
      this.$forceUpdate();
      let checkedArr = []
      this.publicsentimentList.map(item=>{
        if(item.isChecked){
          checkedArr.push(item.id)
        }
      })
      this.ids = checkedArr;
      this.single = this.ids.length !== 1
      this.multiple = !this.ids.length
    },

    /** 查询舆情处置列表 */
    getList() {
      this.loading = true;
      this.single = true
      this.multiple = true
      this.ids = []
      let imgTxtList = []
      listPublicsentiment(this.queryParams).then(response => {
        this.loading = false;
        // 富文本数据处理
        if(!response.rows){
          this.imgTxtList = []
          this.publicsentimentList = []
          return
        }
        response.rows.map(item=>{
          if(item.pscontent == null){item.pscontent = ''}
          item.isChecked = false
          if(item.pscontent.indexOf('img') != -1){
            item.imgArr = this.getImg(item.pscontent)
            item.pscontent = item.pscontent.replace(/<\/?(img)[^>]*>/gi, '').replace(/<\/?(p)[^>]*>/gi, '')
            imgTxtList.push(item)
          }else{
            item.imgArr = []
          }
        })
        //图文数据
        // console.log(imgTxtList,'图文数据');
        this.imgTxtList = imgTxtList
        // 全部列表数据
        this.publicsentimentList = response.rows;
        this.total = response.total;
      });
    },

    getImg(str) {
      var data = [];
      str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
        data.push(capture);
      });
      return data
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        pstitle: null,
        tendentiousness: null,
        linkUrl: null,
        mediaType: null,
        srcWebset: null,
        releaseTime: null,
        releaseArea: null,
        pscategory: null,
        issuesInvolved: null,
        strategies: null,
        isAttention: null,
        pslevel: null,
        keywords: null,
        pscontent: null,
        dealPeriod: null,
        newsAuthor: null,
        sourceRange: null,
        readingCount: null,
        replyCount: null,
        sharesCount: null,
        likesCount: null,
        wbFans: null,
        psStatus: 0,
        isDelete: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getStrategyList(e){
      let body = {
        issues_involved:e
      }
      getStrategyList(body).then(res=>{
        this.strategyList = res
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.isDisabled = false
      this.reset();
      this.open = true;
      this.title = "添加舆情处置";
      this.$nextTick(()=>{
        this.$refs.editorSon.Quill.enable(true)
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.isDisabled = false
      this.reset();
      const id = row.id || this.ids
      getPublicsentiment({id:id[0],taskId:''}).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改舆情处置";
        let body = {
          issues_involved:this.form.issuesInvolved
        }
        getStrategyList(body).then(res=>{
          // console.log(res,'数据数据数据');
          this.strategyList = res
        })
        this.$nextTick(()=>{
          this.$refs.editorSon.Quill.enable(true)
        })
      });
    },
    //查看详情
    handDetails(row) {
      if(!row.readStatus){
        //已读
        readNews({psId:row.id}).then(res=>{})
      }
      this.$router.push({path:'/publicParticulars',query: {id:row.id,type:'cz',taskId:row.taskId}})
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePublicsentiment(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPublicsentiment(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除舆情处置编号为"' + ids + '"的数据项？').then(function () {
        return delPublicsentiment(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('publicsentiment/publicsentiment/export', {
        ...this.queryParams
      }, `publicsentiment_${new Date().getTime()}.xlsx`)
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },
// 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
// 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
// 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    gotoLink(item){
      if(item.linkUrl){
        window.open(item.linkUrl)
      }
    }
  }
};
</script>
<style scoped lang="scss">
.main_container{
  width: 100%;
  height: calc(100vh - 262px);
  position: relative;
  .cont_all{
    width: 100%;
    height: calc(100% - 20px);
    overflow-y: auto;
    .cont_item{
      width: 100%;
      border-bottom: 1px solid #D8DCE5;
      padding-bottom:4px;
      &:last-child{
        margin-bottom: 10px;
      }
    }
    .arrange_top{
      width: 80%;
      font-size: 18px;
      font-weight: 600;
      margin-top:15px;
      color: #222;
      display: flex;
      align-items: center;
      .i_index{
        margin: 0 10px;
        font-weight: 400 !important;
        font-size: 16px;
      }
      img{
        margin-right: 10px;
        cursor: pointer;
      }
      .title{
        width: 100%;
        overflow:hidden; //超出的文本隐藏
        text-overflow:ellipsis; //用省略号显示
        white-space:nowrap; //不换行
        &:hover{
          color: #1890FF;
        }
      }
    }
    .arrange_cont{
      width: 98%;
      display: flex;
      .right_cont{
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .sub_title{
          width:100%;
          color: #222;
          font-size: 16px;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;    //将对象作为弹性伸缩盒子模型显示。
          -webkit-box-orient:vertical;  // 从上到下垂直排列子元素
          -webkit-line-clamp:2; //显示的行数
        }
        .bottom_cont{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .b_left{
            font-size: 14px;
            span{
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
}
.flex-1{
  text-align: center;
  height: 43px;
  line-height: 42px;
  display: flex;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  justify-content: flex-start;
  border-bottom: 1px solid #D8DCE5;
  align-items: center;
  .ops-item{
    display: inline-block;
    color: #666666;
    font-size: .875rem;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
  }
  .hover{
    color: #0096d6;
    font-weight: 700;
  }
  .hover::before{
    content: "";
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #0096d6 transparent;
    position: absolute;
    bottom: -1px;
    left: 50%;
    margin-left: -6px;
  }
}
::v-deep .el-checkbox__inner{
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #DCDFE6 !important;
}
.popover_cont{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  div{
    cursor: pointer;
    &:hover{
      color: #0096d6;
    }
  }
}
::v-deep .el-dialog__body{
  max-height:650px;
  overflow-y: auto;
  padding: 20px !important;
}
.asin_box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .r_select{
    width:75%;
  }
}
</style>
<style lang="scss">
.el-tooltip__popper{
  max-width:50% !important;
}
</style>
